<template>
  <el-dialog
    append-to-body
    :close-on-click-modal="false"
    :before-close="close"
    :visible="dialogFormVisible"
    :title="title"
    width="800px"
    :top="'10vh'"
  >
    <el-form ref="form" :inline="true" :model="form" size="small" label-width="120px">
      <el-collapse v-model="activeName" accordion>
        <el-collapse-item title="基础设置" name="1">
          <el-form-item label="服务名称" prop="name" :rules="[{ required: true, message: '请输入服务名称', trigger: 'blur' }]">
            <el-input v-model="form.name" style="width: 200px" />
          </el-form-item>
          <el-form-item label="服务标识" prop="fwbs" :rules="[{ required: true, message: '请输入服务标识', trigger: 'blur' }]">
            <el-input v-model="form.fwbs" style="width: 200px" />
          </el-form-item>
          <el-form-item label="所属系统" prop="ssxt" :rules="[{ required: true, message: '请选择所属系统', trigger: 'change' }]">
            <el-select v-model="form.ssxt" placeholder="请选择所属系统" style="width: 200px">
              <el-option
                v-for="item in systems"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="主管部门" prop="organization.id" :rules="[{ required: true, message: '主管部门不能为空', trigger: 'change' }]">
            <treeselect
              v-model="form.organization.id"
              :options="depts"
              :load-options="loadDepts"
              style="width: 200px"
              placeholder="选择部门"
            />
          </el-form-item>
          <el-form-item label="移动端图标" prop="appIcon">
            <el-popover
              placement="bottom-start"
              width="450"
              trigger="click"
              @show="$refs['iconSelect'].reset()"
            >
              <el-button slot="reference" size="small" style="padding: 0px;">
                <el-image
                  v-if="form.appIcon"
                  :src="form.appIcon"
                  style="height: 32px;width: 32px;"
                />
                <i v-else style="font-size: 20px;height: 32px;width: 32px;line-height: 32px" class="el-icon-plus" />
              </el-button>
              <server-image-select ref="iconSelect" :fall-back-function="'selected'" @selected="selected" />
            </el-popover>
            <el-input v-model="form.appIcon" type="hidden" style="width: 200px" placeholder="点击选择图标" />
          </el-form-item>
          <el-form-item label="pc端图标" prop="pcIcon">
            <el-popover
              placement="bottom-start"
              width="450"
              trigger="click"
              @show="$refs['pcselect'].reset()"
            >
              <el-button slot="reference" size="small" style="padding: 0px;">
                <i v-if="form.pcIcon === ''|| form.pcIcon === null " style="font-size: 20px;height: 32px;width: 32px;line-height: 32px" class="el-icon-plus" />
                <el-image v-else :src="form.pcIcon" style="height: 32px;width: 32px;" />
              </el-button>
              <server-image-select ref="pcselect" :fall-back-function="'selectedPc'" @selectedPc="selectedPc" />
            </el-popover>
            <el-input v-model="form.pcIcon" type="hidden" style="width: 200px" placeholder="点击选择图标" readonly />
          </el-form-item>
          <el-form-item label="PC端地址" prop="openUrl" :rules="[{ required: true, message: '请输入PC端服务地址', trigger: 'blur' }]">
            <el-input v-model="form.openUrl" style="width: 600px" />
          </el-form-item>
          <el-form-item label="移动端地址" prop="appUrl" :rules="[{ required: true, message: '请输入移动端服务地址', trigger: 'blur' }]">
            <el-input v-model="form.appUrl" style="width: 600px" />
          </el-form-item>
          <el-form-item label="是否角色授权" prop="sfqxkz" :rules="[{ required: true, message: '请选择是否权限控制', trigger: 'change' }]">
            <el-radio-group v-model="form.sfqxkz" style="width: 200px">
              <el-radio
                v-for="item in status"
                :key="item.id"
                :label="item.value"
              >{{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="主要负责人" prop="fzr">
            <el-input v-model="form.fzr" style="width: 200px" />
          </el-form-item>
          <el-form-item label="办理地点" prop="bldd">
            <el-input v-model="form.bldd" style="width: 600px" />
          </el-form-item>
          <el-form-item label="是否推荐" prop="sftj" :rules="[{ required: true, message: '请选择是否推荐', trigger: 'change' }]">
            <el-radio-group v-model="form.sftj" style="width: 200px">
              <el-radio
                v-for="item in status"
                :key="item.id"
                :label="item.value"
              >{{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否启用" prop="sfqy" :rules="[{ required: true, message: '请选择是否启用', trigger: 'change' }]">
            <el-radio-group v-model="form.sfqy" style="width: 200px">
              <el-radio
                v-for="item in status"
                :key="item.id"
                :label="item.value"
              >{{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="优先级" prop="px">
            <el-input-number
              v-model.number="form.px"
              :min="0"
              :max="999"
              controls-position="right"
              style="width: 200px;"
            />
          </el-form-item>
          <el-form-item label="办理方式" prop="blfs" :rules="[{ required: true, message: '请选择办理方式', trigger: 'change' }]">
            <el-radio-group v-model="form.blfs" style="width: 200px">
              <el-radio
                v-for="item in dict.service_blfs"
                :key="item.id"
                :label="item.value"
              >{{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="服务类型" prop="fwlx" :rules="[{ required: true, message: '请选择服务类型', trigger: 'change' }]">
            <el-radio-group v-model="form.fwlx" size="mini" style="width: 600px">
              <el-radio-button v-for="item in dict.service_type" :key="item.id" :label="item.value">{{ item.label }}
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="服务对象">
            <el-checkbox-group v-model="fwdx" size="small" style="width: 600px">
              <el-checkbox v-for="item in dict.service_dx" :key="item.id" :border="true" :label="item.value">{{
                item.label
              }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="展现平台">
            <el-checkbox-group v-model="zxpt" size="small" style="width: 400px">
              <el-checkbox v-for="item in dict.platform_type" :key="item.id" :border="true" :label="item.value">
                {{ item.label }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="显示数据项" prop="isShowData" :rules="[{ required: true, message: '是否显示数据项', trigger: 'change' }]">
            <el-radio-group v-model="form.isShowData" style="width: 200px">
              <el-radio
                v-for="item in status"
                :key="item.id"
                :label="item.value"
              >{{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            v-if="form.isShowData === true"
            :rules="[{ required: true, message: '数据项名称不能为空', trigger: 'blue' }]"
            label="数据项名称"
            prop="sjxmc"
          >
            <el-input v-model="form.sjxmc" style="width: 200px" />
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item title="服务说明" name="2">
          <el-form-item label="服务说明" prop="fwsm">
            <!--        <el-input v-model="form.fwsm" type="textarea" style="width: 600px" />-->
            <wang-editor v-model="form.fwsm" :is-clear="false" />
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item title="注意事项" name="3">
          <el-form-item label="注意事项" prop="zysx">
            <wang-editor v-model="form.zysx" :is-clear="false" />
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item title="相关附件" name="4">
          <el-form-item label="相关附件">
            <el-upload
              class="upload-demo"
              :action="baseUrl+'rest/api/upload/sfile'"
              :headers="customHeader"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :on-success="handleSuccess"
              :before-remove="beforeRemove"
              :before-upload="beforeUpload"
              multiple
              accept=".xls,.xlsx,.doc,.docx,.zip,.jpg,.png"
              :limit="3"
              :on-exceed="handleExceed"
              :file-list="fileList"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传.xls,.xlsx,.doc,.docx,.zip,.jpg,.png，且不超过10Mb</div>
            </el-upload>
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item v-if="form.isShowData === true" :title="form.sjxmc" name="5">
          <div class="custom-tips">
            基础设置
          </div>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item
                label="数据来源"
                prop="type"
                :rules="[{ required: true, message: '请选择数据来源', trigger: 'change' }]"
                style="width: 200px"
              >
                <el-select v-model="form.type" clearable placeholder="请选择数据来源" @change="dataChange">
                  <el-option
                    v-for="item in dataTypes"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="数据项"
                prop="data"
                :rules="[{ required: true, message: '请选择数据项', trigger: 'change' }]"
                style="width: 200px"
              >
                <el-select v-model="form.data" clearable placeholder="请选择数据源" @change="dataObject">
                  <el-option
                    v-for="item in dataSource"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="custom-tips">
            列表项设置(注意列宽之和必须等于24)
            <div class="button-add">
              <el-button type="text" icon="el-icon-plus" @click="doAdd">新增</el-button>
            </div>
          </div>
          <el-row :gutter="20" style="margin-top: 10px">
            <draggable v-model="dataList" animation="300" @end="clone">
              <el-col v-for="(item,index) in dataList" :key="'data-'+index" style="border-bottom: 1px solid #e2e2e2;margin-bottom: 10px" :span="24">
                <el-row :gutter="10">
                  <el-col :span="12">
                    <el-form-item
                      label="显示名称"
                      style="width: 100%"
                    >
                      <el-input v-model="item.label" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item
                      label="关联字段"
                      style="width: 100%"
                    >
                      <el-select v-model="item.column" clearable placeholder="请选择关联字段">
                        <el-option
                          v-for="obj in jxx"
                          :key="obj"
                          :label="obj"
                          :value="obj"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="20">
                    <el-form-item
                      label="显示宽度"
                    >
                      <el-input-number v-model="item.width" :max="24" :min="1" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="4" style="text-align: center">
                    <el-button type="text" icon="el-icon-delete" size="mini" @click="toDelete(item)">删除</el-button>
                  </el-col>
                </el-row>
              </el-col>
            </draggable>
          </el-row>
          <div class="custom-tips">
            查询项设置
            <div class="button-add">
              <el-button type="text" icon="el-icon-plus" @click="doAddQuery">新增</el-button>
            </div>
          </div>
          <el-row :gutter="20" style="margin-top: 10px">
            <el-col v-for="(item,index) in queryList" :key="'query-'+index" :span="24">
              <el-row :gutter="10">
                <el-col :span="12">
                  <el-form-item
                    label="显示名称"
                  >
                    <el-input v-model="item.label" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="关联字段"
                  >
                    <el-select v-model="item.column" clearable placeholder="请选择关联字段">
                      <el-option
                        v-for="obj in jxx"
                        :key="obj"
                        :label="obj"
                        :value="obj"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="字段类型"
                  >
                    <el-select v-model="item.type" clearable placeholder="请选择字段类型">
                      <el-option
                        v-for="obj in controlDataList"
                        :key="obj.id"
                        :label="obj.name"
                        :value="obj.id"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="运算符"
                  >
                    <el-select v-model="item.ysf" clearable placeholder="请选择运算符">
                      <el-option
                        v-for="obj in gxfList"
                        :key="obj.id"
                        :label="obj.name"
                        :value="obj.id"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="24" style="text-align: left">
                  <el-button type="text" icon="el-icon-delete" size="mini" @click="doDeleteQuery(item)">删除</el-button>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <div class="custom-tips">
            详情设置
          </div>
          <el-row :gutter="20" style="margin-top: 10px">
            <el-col :span="12">
              <el-form-item label="是否打开详情页">
                <el-radio-group v-model="entity.isOpen" style="width: 200px">
                  <el-radio
                    v-for="item in status"
                    :key="item.id"
                    :label="item.value"
                  >{{ item.label }}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col v-if="entity.isOpen === true" :span="12">
              <el-form-item
                label="地址字段"
              >
                <el-select v-model="entity.url" clearable placeholder="请选择关联字段">
                  <el-option
                    v-for="obj in jxx"
                    :key="obj"
                    :label="obj"
                    :value="obj"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <div v-if="params" class="custom-tips">
            参数设置
          </div>
          <el-row v-if="params" :gutter="20" style="margin-top: 10px">
            <el-col v-for="(item,index) in params" :key="'params-'+index" :span="24" style="border-bottom: 1px solid #e2e2e2;margin-bottom: 10px">
              <el-row :gutter="10">
                <el-col :span="12">
                  <el-form-item
                    :label="item.name"
                    style="width: 100%"
                  >
                    <el-input v-model="item.testValue" />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-collapse-item>
        <el-collapse-item title="个性化统计项" name="6">
          <div class="custom-tips">
            统计项设置
            <div class="button-add">
              <el-button type="text" icon="el-icon-plus" @click="doCountAdd">新增</el-button>
            </div>
          </div>
          <el-row :gutter="20" style="margin-top: 10px">
            <draggable v-model="countList" animation="300" @end="cloneCount">
              <el-col v-for="(item,index) in countList" :key="'dataCount-'+index" style="border-bottom: 1px solid #e2e2e2;margin-bottom: 10px" :span="24">
                <el-row :gutter="10">
                  <el-col :span="24">
                    <el-form-item
                      label="显示标题"
                      style="width: 100%"
                    >
                      <el-input v-model="item.label" style="width: 450px" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item
                      label="显示图标"
                    >
                      <el-popover
                        placement="bottom-start"
                        width="450"
                        trigger="click"
                      >
                        <el-button slot="reference" size="small" style="padding: 0px;">
                          <el-image
                            v-if="item.tb"
                            :src="item.tb"
                            style="height: 32px;width: 32px;"
                          />
                          <i v-else style="font-size: 20px;height: 32px;width: 32px;line-height: 32px" class="el-icon-plus" />
                        </el-button>
                        <abbreviation-image-select ref="iconSelect" v-model="item.tb" />
                      </el-popover>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item
                      label="数据来源"
                      style="width: 100%"
                    >
                      <el-popover
                        placement="bottom-start"
                        width="450"
                        trigger="click"
                      >
                        <notice-data ref="tempSelect" v-model="item.sjly" />
                        <el-input slot="reference" v-model="item.sjly.name" style="width: 450px" placeholder="点击选择模版" readonly />
                      </el-popover>
                    </el-form-item>
                  </el-col>
                  <el-col v-if="item.sjly.jxx" :span="24">
                    <el-form-item
                      label="数据项"
                    >
                      <el-select v-model="item.number" clearable placeholder="请选择数据项" style="width: 450px">
                        <el-option
                          v-for="obj in item.sjly.jxx"
                          :key="obj"
                          :label="obj"
                          :value="obj"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item
                      label="背景色A"
                      style="width: 100%"
                    >
                      <el-color-picker v-model="item.backColorA" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item
                      label="背景色B"
                      style="width: 100%"
                    >
                      <el-color-picker v-model="item.backColorB" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="预览">
                      <div
                        :style="{ width: '120px',height: '60px',boxShadow: '0 2px 7px 0px '+ item.backColorA,
                                  background: 'linear-gradient(0deg,'+item.backColorA+','+item.backColorB+')'}"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item
                      label="显示标题大小"
                      style="width: 100%"
                    >
                      <el-input-number v-model="item.titleFontSize" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item
                      label="字体颜色"
                      style="width: 100%"
                    >
                      <el-color-picker v-model="item.titleColor" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item
                      label="统计数大小"
                      style="width: 100%"
                    >
                      <el-input-number v-model="item.fontSize" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item
                      label="字体颜色"
                      style="width: 100%"
                    >
                      <el-color-picker v-model="item.fontColor" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="4" style="text-align: center">
                    <el-button type="text" icon="el-icon-delete" size="mini" @click="toCountDelete(item)">删除</el-button>
                  </el-col>
                </el-row>
              </el-col>
            </draggable>
          </el-row>
        </el-collapse-item>
      </el-collapse>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="close">取消</el-button>
      <el-button :loading="loading" type="primary" @click="save('form')">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getDepts, getDeptSuperior } from '@/api/system/dept';
import Treeselect from '@riophae/vue-treeselect';
import '@riophae/vue-treeselect/dist/vue-treeselect.css';
import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect';
import { queryEnable } from '@/api/system/usystem';
import ServerImageSelect from '@/components/ServerImageSelect';
import { getToken } from '@/utils/auth';
import { mapGetters } from 'vuex';
import serviceManager, { edit, add } from '@/api/system/serviceManager';
import WangEditor from '@/components/wangEdit';
import { queryAllByFj } from '@/api/system/serviceManager';
import { queryAllControl, queryAllGxf, querySjlx } from '@/api/portal/manager/setting';
import { queryAllDataSource } from '@/api/data/index';
import draggable from 'vuedraggable';
import AbbreviationImageSelect from '@/components/AbbreviationImageSelect';
import NoticeData from '@/components/NoticeData';
export default {
  name: 'ServiceEntity',
  dicts: ['service_type', 'service_dx', 'service_blfs', 'platform_type'],
  components: { ServerImageSelect, Treeselect, WangEditor, draggable, AbbreviationImageSelect, NoticeData },
  computed: {
    ...mapGetters([
      'user'
    ])
  },
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      status: [{ id: 0, value: false, label: '否' },
        { id: 1, value: true, label: '是' }],
      deptName: '',
      depts: [],
      deptDatas: [],
      dataSource: [],
      dataList: [],
      level: 3,
      activeName: '1',
      controlDataList: [],
      systems: [], // 所属业务系统
      udbs: [], // 待办数据源
      uybs: [], // 已办数据源
      zxpt: [], // 展现平台
      fwdx: [], // 服务对象
      jxx: [], // 解析项
      parentList: {}, // 记录配置项
      showColumn: [], // 显示项配置
      params: [], // 参数设置
      entity: {}, // 详情配置
      queryList: [], // 查询项设置
      dataTypes: [],
      fileList: [],
      gxfList: [],
      countList: [], // 统计项
      dialogFormVisible: false,
      title: '服务管理',
      loading: false,
      form: {
        pcIcon: '',
        appIcon: '',
        name: '',
        ssxt: '',
        fwbs: '',
        openUrl: '',
        appUrl: '',
        sfqxkz: false,
        sftj: false,
        sfqy: true,
        organization: {},
        list: [],
        dbsjy: null,
        ybsjy: null,
        fzr: '',
        fwsm: '',
        zysx: '',
        id: null,
        type: null,
        data: null,
        params: '', // 参数项
        jxx: '', // 解析项
        tjpz: '', // 统计项配置
        isShowData: false, // 是否显示数据项
        sjxmc: '' // 数据项名称
      },
      customHeader: { 'APEXEDU': getToken() }
    };
  },
  watch: {
    fwdx: {
      handler(newName, oldName) { // 值发生变化时
        this.form.fwdx = newName.toString();
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: true // formType为对象时，设置为true，此属性监听对象发生变化
    },
    zxpt: {
      handler(newName, oldName) { // 值发生变化时
        this.form.zxpt = newName.toString();
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: true // formType为对象时，设置为true，此属性监听对象发生变化
    }
  },
  created() {
    // 解决火狐拖拽搜索的问题
    document.body.ondrop = function(event) {
      event.preventDefault();
      event.stopPropagation();
    };
    this.initDataType();
    this.initGxf();
    this.initControl();
  },
  methods: {
    cloneCount() {
      this.countList = this.countList.map((item, index) => {
        item.px = index + 1;
        return item;
      });
    },
    doCountAdd() {
      const item = { label: '', sjly: {}, px: 0, backColorA: '', backColorB: '', titleFontSize: 16, fonSize: 18, titleColor: '', tb: '' };
      this.countList.push(item);
    },
    toCountDelete(item) {
      const index = this.countList.indexOf(item);
      if (index !== -1) {
        this.countList.splice(index, 1);
      }
    },
    doAddQuery() {
      const item = { label: '', column: '', type: null, ysf: null };
      this.queryList.push(item);
    },
    doDeleteQuery(item) {
      const index = this.queryList.indexOf(item);
      if (index !== -1) {
        this.queryList.splice(index, 1);
      }
    },
    initControl() {
      queryAllControl().then(res => {
        const { data } = res;
        this.controlDataList = data;
      });
    },
    initGxf() {
      queryAllGxf().then(res => {
        const { data } = res;
        this.gxfList = data;
      });
    },
    clone() {
      this.dataList = this.dataList.map((item, index) => {
        item.px = index + 1;
        return item;
      });
    },
    doAdd() {
      if (this.dataList === undefined) {
        this.dataList = [];
      }
      const item = { label: '', column: '', width: 1, px: 0 };
      this.dataList.push(item);
      this.$forceUpdate();
    },
    toDelete(item) {
      const index = this.dataList.indexOf(item);
      if (index !== -1) {
        this.dataList.splice(index, 1);
      }
      this.$forceUpdate();
    },
    initParams() {
      if (undefined !== this.form.data && this.form.data !== null) {
        const entity = this.dataSource.filter(item => {
          if (item.id === this.form.data) {
            return item;
          }
        });
        if (undefined !== entity && entity !== null && entity.length > 0) {
          const jxx = entity[0].jxx;
          if (undefined !== jxx && jxx !== null) {
            this.jxx = JSON.parse(jxx);
          } else {
            this.jxx = [];
          }
        }
        this.$forceUpdate();
      }
    },
    dataObject(data) {
      if (undefined !== data && data !== null) {
        const entity = this.dataSource.filter(item => {
          if (item.id === data) {
            return item;
          }
        });
        if (undefined !== entity && entity !== null && entity.length > 0) {
          const cs = entity[0].params;
          if (undefined !== cs && cs !== null) {
            const params = JSON.parse(cs);
            const newParams = params.filter(item => { // 过滤出需要传值的参数
              if (item.valueType === 6) {
                item.test = false;
                return item;
              }
            });
            this.params = newParams;
          }
          const jxx = entity[0].jxx;
          if (undefined !== jxx && jxx !== null) {
            this.jxx = JSON.parse(jxx);
          } else {
            this.jxx = [];
          }
        }
        this.$forceUpdate();
      }
    },
    dataChange() {
      if (this.form.type !== null && this.form.type !== '') {
        if (this.form.type === 1) {
          this.initDataSource();
        } else if (this.form.type === 2) {
          this.initSystemData();
        }
      } else {
        this.form.sjx = null;
      }
    },
    initDataSource() {
      queryAllDataSource().then(res => {
        const { data } = res;
        this.dataSource = data.data;
        this.initParams();
        this.$forceUpdate();
      }).catch(() => {
        this.dataSource = [];
      });
    },
    initSystemData() {
      this.dataSource = [];
    },
    initDataType() {
      querySjlx().then(res => {
        const { data } = res;
        this.dataTypes = data;
        this.$forceUpdate();
      });
    },
    openEntity(data) {
      this.initSystem();
      this.zxpt = [];
      this.fwdx = [];
      if (undefined === data || data === null || data.id === undefined || data.id === null) {
        this.dialogFormVisible = true;
        this.form.id = null;
        this.title = '新增服务';
        this.getDepts();
        this.dataList = [];
      } else {
        this.title = '编辑服务';
        this.form = data;
        if (undefined !== data.organization &&
          data.organization !== null &&
          undefined !== data.organization.id &&
          data.organization.id !== null) {
          this.getSupDepts(data.organization.id);
        }
        this.queryAllFj();
        if (undefined !== data.zxpt && data.zxpt !== null) {
          this.zxpt = data.zxpt.split(',');
        }
        if (undefined !== data.fwdx && data.fwdx !== null) {
          this.fwdx = data.fwdx.split(',');
        }
        if (undefined !== data.jxx && data.jxx !== null && data.jxx !== '') {
          this.parentList = JSON.parse(data.jxx);
          if (undefined === this.parentList.dataList || this.parentList.dataList === null) {
            this.dataList = [];
          } else {
            this.dataList = this.parentList.dataList;
          }
          if (undefined === this.parentList.entity || this.parentList.entity === null) {
            this.entity.isOpen = false;
            this.entity.url = '';
          } else {
            this.entity = this.parentList.entity;
          }
          if (undefined === this.parentList.query || this.parentList.query === null) {
            this.queryList = [];
          } else {
            this.queryList = this.parentList.query;
          }
        } else {
          this.parentList = {};
          this.dataList = [];
        }
        if (undefined !== data.params && data.params !== null && data.params !== '') {
          this.params = JSON.parse(data.params);
        } else {
          this.params = [];
        }
        if (undefined !== data.tjpz && data.tjpz !== null && data.tjpz !== '') {
          this.countList = JSON.parse(data.tjpz);
        } else {
          this.countList = [];
        }
        this.dataChange();
        this.initParams();
        this.$forceUpdate();
        this.dialogFormVisible = true;
      }
    },
    save(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (undefined !== this.dataList && this.dataList !== null && this.dataList.length > 0) {
            this.parentList.dataList = this.dataList;
          } else {
            this.parentList.dataList = [];
          }
          if (undefined !== this.queryList && this.queryList !== null && this.dataList.length > 0) {
            this.parentList.query = this.queryList;
          } else {
            this.parentList.query = [];
          }
          if (undefined !== this.entity && this.entity !== null) {
            this.parentList.entity = this.entity;
          } else {
            this.parentList.entity = Object.assign({});
          }
          if (undefined !== this.params && this.params !== null) {
            this.form.params = JSON.stringify(this.params);
          } else {
            this.form.params = '';
          }
          if (undefined !== this.countList && this.countList !== null) {
            this.form.tjpz = JSON.stringify(this.countList);
          } else {
            this.form.tjpz = '';
          }
          this.form.jxx = JSON.stringify(this.parentList);
          if (this.form.id !== null && undefined !== this.form.id) {
            edit(this.form).then(res => {
              this.$message.success('更新成功！');
              this.close();
            }).catch(() => {
              this.$message.error('更新失败！');
            });
          } else {
            add(this.form).then(res => {
              this.$message.success('保存成功！');
              this.close();
            }).catch(() => {
              this.$message.error('保存失败！');
            });
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    close() {
      Object.assign(this.$data.form, this.$options.data.call(this).form);
      this.fileList = [];
      this.dataList = [];
      this.entity = {};
      this.queryList = [];
      this.countList = [];
      this.dialogFormVisible = false;
      this.$emit('fetch-data');
    },
    getDepts() {
      getDepts({ enabled: true }).then(res => {
        this.depts = res.content.map(function(obj) {
          if (obj.hasChildren) {
            obj.children = null;
          }
          return obj;
        });
      });
    },
    getSupDepts(deptId) {
      getDeptSuperior(deptId).then(res => {
        const date = res.content;
        this.buildDepts(date);
        this.depts = date;
      });
    },
    buildDepts(depts) {
      depts.forEach(data => {
        if (data.children) {
          this.buildDepts(data.children);
        }
        if (data.hasChildren && !data.children) {
          data.children = null;
        }
      });
    },
    // 获取弹窗内部门数据
    loadDepts({ action, parentNode, callback }) {
      if (action === LOAD_CHILDREN_OPTIONS) {
        getDepts({ enabled: true, pid: parentNode.id }).then(res => {
          const { content } = res;
          parentNode.children = content.map(function(obj) {
            if (obj.hasChildren) {
              obj.children = null;
            }
            return obj;
          });
          setTimeout(() => {
            callback();
          }, 200);
        });
      }
    },
    initSystem() {
      queryEnable().then(res => {
        this.systems = res;
      }).catch(() => {
        console.log('初始化业务系统失败！');
      });
    },
    queryAllFj() {
      queryAllByFj({ 'sid': this.form.id }).then(res => {
        const { data } = res;
        this.form.list = data;
        if (data !== null && data.length > 0) {
          this.fileList = data.map(item => {
            return { name: item.name, url: item.fjdz, id: item.id, fext: item.fext };
          });
        } else {
          this.fileList = [];
        }
      }).catch(() => {
        this.fileList = [];
      });
    },
    handleRemove(file, fileList) {
      if (undefined === file.response) {
        if (file.id !== null) {
          const ids = [];
          ids.push(file.id);
          serviceManager.delFj(ids).then(res => {
          }).catch(error => {
            console.log(error);
          });
        }
      }
      if (fileList === null || fileList.length === 0) {
        this.form.list = [];
      } else {
        const lists = fileList.map(item => {
          if (undefined !== item.response) {
            return { name: item.response.name, id: item.response.id, fjdz: item.response.url, fext: item.response.fext };
          } else {
            return { name: item.name, id: item.id, fjdz: item.url, fext: item.fext };
          }
        });
        this.form.list = lists;
      }
    },
    handlePreview(file) {
    },
    handleSuccess(response, file, fileList) {
      if (fileList === null || fileList.length === 0) {
        this.form.list = [];
      } else {
        const lists = fileList.map(item => {
          if (undefined !== item.response) {
            return { name: item.response.name, id: item.response.id, fjdz: item.response.url, fext: item.response.fext };
          } else {
            return { name: item.name, id: item.id, fjdz: item.url, fext: item.fext };
          }
        });
        this.form.list = lists;
      }
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    beforeUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 10;
      if (!isLt2M) {
        this.$message.error('上传文件大小不能超过10MB!');
      }
      return isLt2M;
    },
    selected(name) {
      this.form.appIcon = name.url;
    },
    selectedPc(name) {
      this.form.pcIcon = name.url;
    }
  }
};
</script>

<style scoped>
.el-collapse-item >>> .el-collapse-item__header {
  font-size: 16px;
  font-weight: bolder;
  color: #606266;
  background-color: #ecf8ff;
  border-radius: 4px;
  padding: 0px 10px;
  box-sizing: border-box;
  position: relative;
  border-left: 5px solid #50bfff;
  margin-top: 5px;
}
.el-collapse-item >>> .el-collapse-item__content {
  padding: 5px 10px;
  box-sizing: border-box;
}
.custom-tips {
  width: 100%;
  min-height: 40px;
  line-height: 40px;
  text-align: left;
  padding: 8px 16px;
  background-color: #ecf8ff;
  border-radius: 4px;
  border-left: 5px solid #C63E11;
}
.button-add {
  width: 50px;
  height: 40px;
  float: right;
  text-align: center;
  line-height: 40px;
  margin-right: 20px;
}
.custom-button {
  text-align: right;
}
</style>
